<template>
  <div id="echarts5"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb8.png" />
                 流失用户
             </div>
             <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
            
         </div>
         <div class="box">
              <div class="top_item" style="justify-content: flex-end;">
                 <div class="top_item_but" :class="select_id==1 ? 'active1' : ''" @click="select_but(1)">当月</div>
                 <div class="top_item_but" :class="select_id==2 ? 'active1' : ''"  @click="select_but(2)">当周</div>
             </div>
              <div style="width:100%;height:250px;padding-top:70px;">
                    <!-- <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">流失数量</div>
                          <div class="item_b_2">{{ list_data.loss_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">流失比活跃</div>
                          <div class="item_b_2">{{ list_data.active_scale }}</div>
                      </div>
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">回归数量</div>
                          <div class="item_b_2">{{ list_data.comeback_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">流失比新增</div>
                          <div class="item_b_2">{{ list_data.news_scale }}</div>
                      </div>
                  </div> -->
                   <div class="item_a" style="padding-top:0px;">
                      <div class="item_b">
                          <div class="item_b_1">新增留存</div>
                          <div class="item_b_2">{{ list_data.new_add_keep }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">新增流失</div>
                          <div class="item_b_2">{{ list_data.new_add_loss }}</div>
                      </div>
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">流失数量</div>
                          <div class="item_b_2">{{ list_data.loss_count }}</div>
                      </div>
                      <div class="item_b">
                          <div class="item_b_1">回归数量</div>
                          <div class="item_b_2">{{ list_data.comeback_count }}</div>
                      </div>
                  </div>
              </div>
            
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'echarts1',
  data () {
    return {
        list_data:'',
        select_id:2,
        type:2,  //type  1-当月  2-当周
    }
  },
   components:{

  },
  created(){
      this.list_fun()
  },
  mounted (){
    
  },
  methods: {
        list_fun(){
    
         this.post("/whole/lossData", {
              type:this.type
	        }).then(res => {
                this.list_data = res.result
                console.log(res,"ppppp")
            })
       },
       select_but(index){
         this.select_id = index
         if(index == 1){         
              this.type = 1
              this.list_fun()
          }else if(index == 2){
              this.type = 2
              this.list_fun()
          }
    },
       go_but(){
            this.$router.push({
                path: '/index/operationdata/population/detailsEcharts6',
                query: {
                    name:'流失用户',
                }
            })
          }


  }
}
</script>


<style scoped>
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:#FC6B32;   
    background: #F5EFE2;  
    box-shadow: 0px 4px 9px 0px rgba(252, 107, 50, 0.5);
    cursor: pointer;
}
.active1{
    background: #FC6B32;
    color:white;
}
.box{
    padding: 10px;
    border-radius: 10px;    
    box-shadow: 0px 4px 9px 0px rgba(254, 206, 77, 0.1);
    margin-top: 20px;
}
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
.item_a{
  display:flex;
  padding:0px 15px;
  padding-top: 20px;
}
.item_b{
  flex: 1;
}
.item_b_1{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #5E6C84;
}
.item_b_2{
  margin-top: 10px;
  text-align: center;
  font-size: 30px;
  font-weight: 500;
  color: #344563;
}
</style>